매력적인 자바스크립트: 프로그래밍의 현대적 입문: 고성능 그래픽으로 전환하기

컴퓨터 그래픽에서 우리는 다음을 구분합니다: 벡터 그리고 비트맵 그래픽입니다. 벡터 그래픽(예: SVG)은 논리적 형태를 통해 이미지를 설명합니다. 각 요소는 DOM 내에서 지속적인 객체입니다. 반면, 비트맵 그래픽(예: HTML5 Canvas)은 색상 점들의 래스터로 작동합니다.

1. 캔버스로의 전환

SVG는 CSS를 통해 스타일링하기가 더 쉽지만, 브라우저는 모든 노드를 추적해야 합니다. 고성능이 필요한 경우, 수천 개의 이동 요소를 가진 게임처럼, 캔버스 API가 더 우수합니다. 이는 그림을 그리는 표면을 포함하는 단일 DOM 요소를 제공합니다—본질적으로 '백슬레이트'입니다.

2. 그리기 컨텍스트

그리고 <canvas> 요소는 초기화되기 전까지는 '블랙박스'입니다. 그 컨텍스트객체의 메서드는 실제 그리기 인터페이스를 제공하며, 디스플레이 요소와 렌더링 로직을 분리합니다.

var context = canvas.getContext("2d");

3. 네임스페이스 인식

SVG와 같은 XML 기반 그래픽에서는 xmlns="http://www.w3.org/2000/svg" 속성이 중요합니다. 이는 브라우저가 일반적인 HTML 파싱에서 특정 그래픽 스키마로 전환하도록 신호를 보내며, 형태 태그가 상호작용 가능한 객체로 인식되도록 합니다.

TERMINALbash — 80x24

> Ready. Click "Run" to execute.

QUESTION 1

What is the primary difference between Vector and Bitmap graphics?

Vector uses pixel data; Bitmap uses logical shapes.

Vector uses logical shape descriptions; Bitmap uses a grid of colored dots.

Vector is always faster for game rendering.

Bitmap elements remain persistent in the DOM.

QUESTION 2

What is the purpose of the xmlns attribute in an SVG tag?

To define the width and height of the viewport.

To link an external CSS stylesheet.

To change the element to a different XML namespace for specific schema recognition.

To enable hardware acceleration for bitmap rendering.

QUESTION 3

How do you access the drawing interface for an HTML5 Canvas?

By modifying the .style.color property of the canvas.

By calling the getContext('2d') method on the canvas element.

By inserting SVG tags inside the <canvas> tags.

By using the document.draw() global function.

QUESTION 4

Why does a dashboard with 10,000 data points run faster on Canvas than SVG?

Canvas uses fewer DOM nodes, reducing browser tracking overhead.

Canvas allows for better CSS styling of individual bars.

SVG cannot handle color hex codes.

Canvas automatically deletes old frames.

QUESTION 5

Once a shape is drawn to a Canvas, what happens to its 'identity'?

It can be selected and moved via standard DOM queries.

It is stored as a persistent object in the browser memory.

It becomes part of the pixel raster and loses its individual identity.

It is automatically converted to an SVG path.